<template>
  <div class="page_root">
    <div class="section">
      <div class="card">
        <h1 class="title">{{ detail.name }}</h1>
        <div class="info">
          <div class="time">创建时间：{{ formatDate(detail.created_at) }}</div>
          <!-- <div class="count">阅读：{{ detail.view_count }}</div> -->
        </div>
        <div class="md-body">
          <Preview :content="html" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import http from '~/utils/http'

export default {
  name: 'BlogContent',
  async asyncData({ params }) {
    const data = {}
    try {
      const res = await http.get(`/blog/${params.hash}`)
      if (res.code === 200) {
        data.detail = res.data.blog
        data.prev = res.data.prev
        data.next = res.data.next
        // 所有老文章中的案例，全部替换为空字符串，不再展示链接
        const content = res.data.blog.content
          .replace(
            /\.\/images\/((.*?)\.(png|jpg|gif|jpeg))/g,
            `${process.env.API_ORIGIN}/static/blogs/${res.data.blog.hash}/images/$1`
          )
          .replace(/(\[.*?\])\(\.\/demo(\/.*?\.html\))/g, ``)
        data.beforeRenderHtml = content
        data.html = content
      }
    } catch (e) {}

    return data
  },
  data() {
    return {
      detail: {
        name: '',
        conent: '',
      },
      html: '',
      allList: [],
    }
  },
  head() {
    return {
      title: `${this.detail.name} 二师兄笔迹`,
      meta: [
        {
          name: 'keywords',
          content: `${this.detail.name} 二师兄笔迹 前端 大前端 JavaScript HTML CSS Java Python Flutter blog `,
        },
        {
          name: 'description',
          content: `${this.detail.name} 二师兄笔迹 前端 大前端 JavaScript HTML CSS Java Python Flutter blog`,
        },
      ],
    }
  },
  mounted() {
    // this.html = this.beforeRenderHtml
  },
  methods: {
    formatDate(v) {
      return moment(v).format('YYYY-MM-DD HH:mm:ss')
    },
  },
}
</script>
<style lang="scss" scoped>
.page_root {
  padding-bottom: 100px;
  .section {
    padding: 0 10px;
  }
  .title {
    padding: 20px 0;
  }
  .info {
    border-bottom: 4px solid $color-border;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: rgb(161, 161, 161);
    display: flex;
    .time {
      margin-right: 40px;
    }
  }
}
</style>
